<template>
  <div class="panel">
    <div class="hd">
      <h3>{{formDatas.formName}}</h3>
      <div class="edit">
        <button class="edit-btn" v-if="!editFlag" @click="editFlag=true" ><span ><i class="glyphicon glyphicon-edit"></i>编辑</span></button>
      </div>
    </div>
    <div class="bd" v-loading="loading">
       <form-components class="mb20" :formDatas="formDatas" :editFlag.sync="editFlag" :params="{'xh':`${xh}`}" @reloadData="getData"></form-components>
    </div>
  </div>
</template>

<script>
import FormComponents from "@/components/common/form/Form";
export default {
  name: "RelevanceTable",
  components: { FormComponents },
  data() {
    return {
      formDatas: [],
      editFlag: false,
      xh: this.$route.query.xh,
      loading: true,
      formDatas2: [],
      editFlag2: false
    };
  },
  created: function() {
    this.getData();
  },
  methods: {
    getData() {
      this.$http
        .get("/data/form/relevance-table.json", {
          params: {
            dataId: this.xh
          }
        })
        .then(res => {
          if (res.code === 0) {
            this.loading = false;
            this.formDatas = res.data;
            this.$emit("title", this.formDatas.formName);
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .show-table table {
  th {
    color: #cc3a39;
    font-weight: bold;
    background: none;
  }
  th:first-child {
    opacity: 0;
  }
  tr > td:first-child span {
    color: #cc3a39;
    font-weight: bold;
  }
}
</style>
